<script setup lang="ts">
    import { computed } from 'vue';
    import { useArticleStore } from '@/stores/article';
    import { api } from '@/services/api';
    import { LikeTypeEnum } from '@/enums';
import { ElMessage } from 'element-plus';

    const articleStore = useArticleStore();

    const whichClass = computed(() => articleStore.whichClass);

    const data = computed(() => articleStore.articleInfo);

    // 点赞
    const giveLike = async () => {
        // 调用点赞接口
        const response = await api.article.giveLike({
            /** 对应的文章或评论的id */
            id: data.value.wznm,
            /** 点赞类型 文章点赞 */
            type: LikeTypeEnum.ARTICLE,
            /** 是否点赞 */
            isLike: !whichClass.value.praise.flag
        });
        if(response.code === 0) {
            if(whichClass.value.praise.flag) {
                if (articleStore.articleInfo.giveLikeNum && articleStore.articleInfo.giveLikeNum >= 1) {
                    articleStore.articleInfo.giveLikeNum -= 1;
                }
                if(data.value.giveLikeNum == 0) {
                    whichClass.value.praise.className = "";
                } else {
                    whichClass.value.praise.className = "count";
                }
            } else {
                if (articleStore.articleInfo.giveLikeNum != undefined) {
                    articleStore.articleInfo.giveLikeNum += 1;
                }
                whichClass.value.praise.className = "count active";
            }
            whichClass.value.praise.flag = !whichClass.value.praise.flag;
        } else {
            ElMessage.error(response.msg);
        }
    }

    // 收藏
    const collect = async () => {
        // 调用点赞接口
        const response = await api.article.collect({
            /** 文章内码 */
            wznm: data.value.wznm,
            /** 是否收藏 */
            isCollect: !whichClass.value.collect.flag
        });
        if(response.code === 0) {
            if(whichClass.value.collect.flag) {
                if (articleStore.articleInfo.collectNum && articleStore.articleInfo.collectNum >= 1) {
                    articleStore.articleInfo.collectNum -= 1;
                }
                if(data.value.collectNum == 0) {
                    whichClass.value.collect.className = "";
                } else {
                    whichClass.value.collect.className = "count";
                }
            } else {
                if (articleStore.articleInfo.collectNum != undefined) {
                    articleStore.articleInfo.collectNum += 1;
                }
                whichClass.value.collect.className = "count active";
            }
            whichClass.value.collect.flag = !whichClass.value.collect.flag;
        } else {
            ElMessage.error(response.msg);
        }
    }

</script>
<template>
    <div class="article-panel-data">
        <div class="panel-btn" :class="whichClass.praise.className" @click="giveLike" :badge="data.giveLikeNum">
            <svg-icon href='#icon-praise' width="0.6em" height="0.6em" class="common-icon" :class="whichClass.praise.className"></svg-icon>
        </div>
        <div class="panel-btn" :class="whichClass.collect.className" @click="collect" :badge="data.collectNum">
            <svg-icon href='#icon-collect' width="0.7em" height="0.7em" class="common-icon" :class="whichClass.collect.className"></svg-icon>
        </div>
        <div class="panel-btn" :class="whichClass.comment.className" @click="$emit('goDingyue')" :badge="data.postNum">
            <svg-icon href='#icon-comment' width="0.6em" height="0.6em" class="common-icon"></svg-icon>
        </div>
        <el-popover
            placement="right-start"
            style="width: 165px;"
            trigger="click"
        >
            <ul class="share-ul">
                <li class="share-li-item">
                    <a class="weibo" title="分享到微博" target="_blank">
                        <img src="@/assets/share/weibo.png" alt="微博logo"/><span class="share-name">新浪微博</span>
                    </a>
                </li>
                <li class="share-li-item">
                    <a class="qqs" title="分享到QQ好友" target="_blank">
                        <img src="@/assets/share/qq.png" alt="QQlogo"/><span class="qq-name">QQ</span>
                    </a>
                </li>
                <li class="share-li-item">
                    <a class="qzone" title="分享到QQ空间" target="_blank">
                        <img src="@/assets/share/qzone.jpg" alt="QQ空间logo"/><span class="qzone-name">QQ空间</span>
                    </a>
                </li>
            </ul>
            <template #reference>
                <div class="panel-btn">
                    <svg-icon href='#icon-share' width="0.6em" height="0.6em" class="common-icon"></svg-icon>
                </div>
            </template>
        </el-popover>
    </div>
</template>
<!-- 引入样式文件 -->
<style lang="less" src="./style.less" />